<template>
  <div class="shoucang">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">收藏商品</div>
    </div>
    <div class="suo_sou">
      <div class="kuang">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" />
        <span>搜索</span>
      </div>
      <span>管理</span>
    </div>

    <div class="guan_li">
        <div v-show="true">
          <label for="danxuan_anniu">
            <span class="iconfont icon-gou">
            </span>
            
          </label>
          <span>全选</span>
          <input type="checkbox" name="danxuan_anniu" id="danxuan_anniu" />
        </div>
        <div v-show="true">
          <span>完成</span>
          <span>删除</span>
        </div>
      </div>

    <div class="zong_shop">
      <router-link to="">
        <div>
          <img src="../../public/picture/sousuo/3.jpg" alt="" />
        </div>
        <div>
          <p>草莯星球9朵红玫瑰花束鲜花速递女友生日情人节</p>
          <p>
            <del>￥429</del>
            <ins>￥349</ins>
          </p>
          <div>
            <span>库存充足</span>
            <span class="iconfont icon-gouwuchecopy"></span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  },
  methods:{
    fanHui(){
      window.history.go(-1)
    },
  }
};
</script>

<style lang="less" scoped>
.shoucang {
  .suo_sou {
    height: 1.333333rem;
    margin: 0.133333rem 0 0px;
    padding: 0.133333rem 0.133333rem;
    width: 100%;
    // border-bottom: 1px solid #d6d6db;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
    .kuang {
      background: #EFEFF4;
      padding: 0.133333rem 0.4rem;
      height: 100%;
      width: 80%;
      position: relative;
      input {
        border-radius: 2px;
        outline: none;
        border: none;
        width: 100%;
        height: 100%;
        background: #ffffff;
        padding-left: 0.8rem;
      }
      :last-child {
        font-size: 14px;
        color: #666666;
        cursor: pointer;
        position: absolute;
        width: 1.53333rem;
        right: 0.4rem;
        text-align: center;
        height: 0.773333rem;
        line-height: 0.773333rem;
      }
      i {
        color: #888888;
        font-size: 20px;
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    > span {
      line-height: 1.04rem;
      font-size: 14px;
      display: inline-block;
      width: 20%;
      text-align: center;
      height: 100%;
      color: #666666;
    }
  }

    .guan_li {
      border-bottom: 1px solid #E5E5E5;
      padding: 0px 0.266667rem;
      width: 100%;
      height: 1.1rem;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-between;
      > :first-child {
          display: flex;
          align-items: center;
        > label {
          height: 100%;
          display: block;
          > span {
            cursor: pointer;
            font-size: 25px;
            color: #C7C4C4;
            // color: #FF7100;
          }
        }
        >span{
            font-size: 16px;
            color: #59607B;
        }
        > input {
          display: none;
        }
      }
      > :last-child {
        > span {
          text-align: center;
          line-height: 0.72rem;
          width: 1.44rem;
          height: 0.72rem;
          margin: 0px 0.133333rem;
          display: inline-block;
          font-size: 14px;
          cursor: pointer;
          border-radius: 2px;
          color: #666;
          border: 1px solid #cccccc;
        }
      }
    }


  .zong_shop {
    background: #F8F8F8;
    height: 2.666667rem;
    //   border-bottom: 1px solid #E5E5E5;
    width: 100%;
    padding: 0.133333rem 0.266667rem;
    a {
      height: 100%;
      width: 100%;
      display: flex;
      flex-flow: row;
      > :first-child {
        height: 100%;
        padding: 0.133333rem;
        margin-right: 0.266667rem;
        img {
          height: 100%;
        }
      }
      > :last-child {
        width: 70%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        font-size: 15px;
        > :nth-child(1) {
          width: 100%;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        > :nth-child(2) {
          del {
            color: #666666;
            margin-right: 0.133333rem;
          }
          ins {
            text-decoration: none;
            color: #FF6600;
          }
        }
        > :last-child {
          display: flex;
          justify-content: space-between;
          :first-child {
            color: #666666;
          }
          :last-child {
            color: #666666;
          }
        }
      }
    }
  }
}
</style>

